const React = require('react');
const ReactDOM = require('react-dom');
const BaseDemo = require('../BaseDemo');
const classnames = require('classnames');
const Tile = require("../Tile");
const Label = require('Label');
const Card = require('Card');
const Button = require('Button');
const jQuery = require('jquery');
const TableForm = require('business/TableForm');

class Page extends BaseDemo{

    addRow(){
        this.refs.tableForm.addRow();
    }

    removeRow(){
        this.refs.tableForm.removeRow(0);
    }

    getData(){
        console.log(this.refs.tableForm.getData());
    }


    onChange(name, value, col, items, selectItem){
        if(name === "loopDomain"){
            items["checkURL"].setValue("http://"+value);
        }
    }

    submit(){
        if(this.refs.tableForm.isValid()){
            //do submit
        }

    }

    componentDidMount(){
        let table_form = ReactDOM.findDOMNode(this.refs.tableForm);

        let scope = this;
        $(table_form).on("click",".delete-btn", function () {
            let id = $(this).data("id");
            console.log(scope.refs.tableForm.getRowData(id));

        })
    }

    render() {

        let columns = [
            {name: "domain", type: "text", text: "域名", props: {required: true, placeholder: "www.baidu.com"}},
            {name: "loopDomain", type: "textarea", text: "回源IP/回源域名", props: {required: true}, messages: {required: "请填写回源IP/回源域名"}},
            {name: "checkURL", type: "textarea", text: "回源检测URL", props: {required: true}},
            {name: "clientIP", type: "select", text: "获取客户端IP", props: {required: true, defaultValue: "1", data: [{id: "0", text: "北京"},{id: "1", text: "上海"}]}},
            {name: "district", type: "select", text: "加速区域", props: {required: true, multi: true, data: [{id: "0", text: "北京"},{id: "1", text: "上海"}]}},
            {name: "op", text: "操作", format: function(value, col, row){
                return '<a href="javascript:void(0)" class="text-blue delete-btn" data-id="'+row.id+'"><i class="fa fa-trash"></i>删除</a>';
            }},
        ];
        return (
            <div className="container">
                <Card title="表格form">
                    <TableForm ref="tableForm" columns={columns} className="form-table text-center" onChange={this.onChange.bind(this)}/>

                    <div className="mt-25 text-center">
                        <Button theme="primary" onClick={this.submit.bind(this)}>提 交</Button>
                    </div>

                    <div className="mt-20">
                        <Button onClick={this.addRow.bind(this)}>添加</Button>
                        <Button onClick={this.removeRow.bind(this)}>删除</Button>
                        <Button onClick={this.getData.bind(this)}>获取数据</Button>
                    </div>
                </Card>
            </div>
        );
    }
}

module.exports = Page;